import type { FormProps as ElFormProps, FormItemProps as ElFormItemProps } from 'element-plus';
import type { componentMap } from '../helper/componentMap';
import type { CSSProperties } from 'vue';

export interface FormItemProps extends Partial<ElFormItemProps> {
  style?: CSSProperties;
  slots?: {
    default?: (...args: any[]) => JSX.Element | null;
    label?: (...args: any[]) => JSX.Element | null;
    error?: (...args: any[]) => JSX.Element | null;
  };
}

export interface FormSchema {
  /** 唯一标识 */
  field: string;
  /** 标题 */
  label?: string;
  /** 是否被隐藏, 类似v-if */
  remove?: boolean;
  /** 是否被隐藏, 类似v-show */
  hidden?: boolean;
  formItemProps?: FormItemProps;
  /** 组件类型, 例如: Input, Select, Switch, Checkbox, Radio, DatePicker, TimePicker, DateTimePicker, Upload, Transfer, Slider, TimeSelect, SelectTree, Divider */
  component?: keyof typeof componentMap;
  /** 每种组件的属性 */
  componentProps?: Record<string, any>;
  /** col组件属性 */
  colProps?: ColProps;
}

export interface FormProps extends Partial<ElFormProps> {
  schema?: FormSchema[];
  [key: string]: any;
}

export enum ComponentNameEnum {
  RADIO_GROUP = 'RadioGroup',
  RADIO_BUTTON = 'RadioButton',
  CHECKBOX_GROUP = 'CheckboxGroup',
  CHECKBOX_BUTTON = 'CheckboxButton',
  INPUT = 'Input',
  AUTOCOMPLETE = 'Autocomplete',
  INPUT_NUMBER = 'InputNumber',
  SELECT = 'Select',
  CASCADER = 'Cascader',
  SWITCH = 'Switch',
  SLIDER = 'Slider',
  TIME_PICKER = 'TimePicker',
  DATE_PICKER = 'DatePicker',
  RATE = 'Rate',
  COLOR_PICKER = 'ColorPicker',
  TRANSFER = 'Transfer',
  DIVIDER = 'Divider',
  TIME_SELECT = 'TimeSelect',
  SELECT_V2 = 'SelectV2',
  INPUT_PASSWORD = 'InputPassword',
  EDITOR = 'Editor',
  TREE_SELECT = 'TreeSelect',
  UPLOAD = 'Upload',
  JSON_EDITOR = 'JsonEditor',
  ICON_PICKER = 'IconPicker',
  I_AGREE = 'IAgree'
}

type CamelCaseComponentName = {
  [K in keyof typeof ComponentNameEnum]: K extends `${infer First}_${infer Rest}`
    ? `${Capitalize<Lowercase<First>>}${Capitalize<Lowercase<Rest>>}`
    : Capitalize<Lowercase<K>>;
}[keyof typeof ComponentNameEnum];

export type ComponentName = CamelCaseComponentName;

export interface PlaceholderModel {
  placeholder?: string;
  startPlaceholder?: string;
  endPlaceholder?: string;
  rangeSeparator?: string;
}

export interface ColProps {
  span?: number;
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  tag?: string;
}
